<template>
  <div>
    <el-dialog
      title="用户注册"
      :visible.sync="showReg"
      center
      width="600px"
      @close="closeEvent"
    >
      <el-form label-width="100px" :model="form" :rules="rules" ref="form">
        <el-form-item label="头像" prop="avatar"
          ><UploadAvatar
            v-model="form.avatar"
            @avatarPath="avatarPath = $event"
        /></el-form-item>
        <el-form-item label="昵称" prop="username"
          ><el-input v-model="form.username"></el-input
        ></el-form-item>
        <el-form-item label="邮箱" prop="email"
          ><el-input v-model="form.email"></el-input
        ></el-form-item>
        <el-form-item label="手机" prop="phone"
          ><el-input v-model="form.phone"></el-input
        ></el-form-item>
        <el-form-item label="密码" prop="password"
          ><el-input v-model="form.password" show-password></el-input
        ></el-form-item>
        <el-form-item label="图形码" prop="code"
          ><el-input v-model="form.code"></el-input>
          <img @click="changeCode" :src="img" alt=""
        /></el-form-item>
        <el-form-item label="验证码" prop="rcode"
          ><el-input v-model="form.rcode"></el-input
          ><el-button @click="getRcode">获取用户验证码</el-button></el-form-item
        >
      </el-form>

      <template #footer>
        <div style="text-align: center">
          <el-button type="primary" @click="submit">确定</el-button>
          <el-button @click="showReg = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { regCode, sendsms, register } from "@/api/register";

export default {
  data() {
    return {
      showReg: false,
      img: "",
      avatarPath: "",
      form: {
        avatar: "", // 是	string	头像地址
        username: "", // 是	string	用户名
        email: "", // 是	string	邮箱
        phone: "", // 是	string	手机号
        password: "", // 是	string	密码
        code: "",
        rcode: "", // 是	string	验证码
      },
      rules: {
        avatar: [{ required: true, message: "请上传头像", trigger: "change" }],
        username: [
          { required: true, message: "必填", trigger: "change" },
          { min: 3, max: 12, message: "3-12个字符的昵称", trigger: "change" },
        ],
        email: [
          { required: true, message: "必填", trigger: "change" },
          {
            pattern:
              /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
            message: "邮箱格式不正确",
            trigger: "change",
          },
        ],
        phone: [
          { required: true, message: "必填", trigger: "change" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号格式不正确",
            trigger: "change",
          },
        ],
        password: [{ required: true, message: "必填", trigger: "change" }],
        code: [
          { required: true, message: "必填", trigger: "change" },
          { min: 4, max: 4, message: "四位图形码", trigger: "change" },
        ],
        rcode: [
          { required: true, message: "必填", trigger: "change" },
          { min: 4, max: 4, message: "四位验证码", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    async changeCode() {
      const res = await regCode();
      this.img = `data:image/png;base64,${btoa(
        new Uint8Array(res).reduce(
          (data, byte) => data + String.fromCharCode(byte),
          ""
        )
      )}`;
    },
    //获取短信验证码
    async getRcode() {
      const res = await sendsms({
        code: this.form.code,
        phone: this.form.phone,
      });
      console.log(res);
      if (res.code === 200) {
        this.$message.success(res.data.captcha);
      } else {
        this.$message.error(res.message);
        this.changeCode();
      }
    },
    submit() {
      this.$refs.form.validate(async (result) => {
        if (result) {
          console.log({ ...this.form, avatar: this.avatarPath });
          const res = await register({ ...this.form, avatar: this.avatarPath });
          console.log(this.form.avatar);
          console.log("注册", res);
          this.$message.error(res.message);
          if (res.message === "ok") {
            this.showReg = false;
            this.$message.success("注册成功");
          }
        }
      });
    },
    closeEvent() {
      this.$refs.form.resetFields();
      this.form = {
        avatar: "", // 是	string	头像地址
        username: "", // 是	string	用户名
        email: "", // 是	string	邮箱
        phone: "", // 是	string	手机号
        password: "", // 是	string	密码
        code: "",
        rcode: "", // 是	string	验证码
      };
    },
  },
  created() {
    this.changeCode();
  },
};
</script>

<style scoped lang="less">
::v-deep .el-form-item__content {
  display: flex;
  .el-button,
  img {
    margin-left: 15px;
  }
  .el-button {
    width: 280px;
  }
}
</style>
